class FolderMover extends DivMover {
    folderContainerObj={}
    folderShow = {}
    folderContainer={} //文件夹放大展示时的DivContainer对象
    parentFolderMover=null
    childrenDivMoverList={}
    constructor(divMover,childrenDivMoverList=[],parentFolderMover = null,folderContainerObj = null,
                emptyFolderWidth,emptyFolderHeight) {
        //清除空间，为初始化时会占领区域流出空余
        divMover.divContainer.clearArea(divMover.x,divMover.y,divMover.moveDistanceX,divMover.moveDistanceY)
        divMover.destroyDivMover()
        super(divMover.element.className, 
            divMover.x, 
            divMover.y, 
            divMover.moveDistanceX, 
            divMover.moveDistanceY,
            divMover.divContainer, 
            "./icon/floderblue.png",
            "新建文件夹",
            divMover._iconDiv.className,
            divMover._iconNameDiv.className,
            "这是一个文件夹")//url
        this.childrenDivMoverList = childrenDivMoverList
        this.originalDivMover = divMover
        this.parentFolderMover = parentFolderMover
        this.folderContainerObj = folderContainerObj
        let iconDiv = FolderMover.createGridIcon(childrenDivMoverList,emptyFolderWidth,emptyFolderHeight)
        this.iconDiv = iconDiv  //更新iconDiv
        console.log(' --------FolderMover construct success')
    }

    handlerClick(){
        this.showFolder()
    }

    static createGridIcon(childrenDivMoverList,emptyFolderWidth,emptyFolderHeight) {
        const gridContainer = document.createElement('div');
        // gridContainer.className = 'folder-container';
        gridContainer.style.display = 'grid'; //布局
        gridContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
        gridContainer.style.gridTemplateRows = 'repeat(2, 1fr)';
        // gridContainer.style.gap = '3px';

        if(childrenDivMoverList.length === 0){
            console.log('创建空文件夹')
            gridContainer.style.height = emptyFolderWidth //长宽
            gridContainer.style.width = emptyFolderHeight
        }else{ //floder no empty
            gridContainer.className="divIcon"
            gridContainer.style.height = "60%" //长宽
            gridContainer.style.width = "60%"
            gridContainer.style.border = "solid 1px black"
            gridContainer.style.borderRadius= "5%"
            gridContainer.style.backgroundColor= "rgba(128, 128, 128, 0.6)"
            // gridContainer.style.opacity = "0.6"
        }
        
        // 加入子元素
        let i = 0
        for(let child of childrenDivMoverList){
            if(i >= 4) break
            let iconDiv = document.createElement('div');
            iconDiv.style.margin = "10%"
            iconDiv.style.borderRadius = "10%"
            iconDiv.style.fontSize = "25px"
            if(child.icon){
                let img = new Image();
                img.src = child.icon;
                iconDiv.style.backgroundImage = `url(${child.icon})`
                img.onerror = ()=>{
                    iconDiv.style.backgroundColor = child.iconBackgroundColor
                    iconDiv.textContent = child.iconName.slice(0,1)
                }
            }
            if(child instanceof FolderMover){
                iconDiv.style.backgroundImage = `url("./icon/floderblue.png")`
            }
            console.log('child.icon',child.icon)
            iconDiv.style.backgroundSize = 'cover';
            iconDiv.classList.add(".divIcon:hover")
            gridContainer.appendChild(iconDiv);
            i++
        }

        // 替换图标为创建的文件夹图标
        return gridContainer
    }

    updateGridIcon(){
        this.iconDiv = FolderMover.createGridIcon(this.childrenDivMoverList)
    }

    appendChild(divMover){
        this.childrenDivMoverList.push(divMover)
        this.updateGridIcon()
    }

    showFolder() {//放大展示文件夹
        let flag = document.querySelector("#folderShow")
        let closeButton ={}
        let breadcrumb={}
        if(!flag){ //不存在则创建
            //创建folderShow div
            let folderShow = document.createElement("div")
            folderShow.id = "folderShow"
            folderShow.style.width = this.moveDistanceX * 8 +"px"
            folderShow.style.height =  this.moveDistanceY * 6 +"px"
            folderShow.style.backgroundColor = "gray"
            folderShow.style.position = "relative"
            folderShow.style.display = "flex"
            folderShow.style.flexDirection = "column"
            folderShow.style.justifyContent = "center"
            folderShow.style.alignItems="center"
            folderShow.style.zIndex = "3"
            folderShow.id= "folderShow"
            
            //计算居中
            let left = Math.round((this.divContainer.container.scrollWidth - parseInt(folderShow.style.width))/2) + "px"
            let top = Math.round((this.divContainer.container.scrollHeight - parseInt(folderShow.style.height))/2) + "px"
            folderShow.style.top = top
            folderShow.style.left = left

            //删除按钮
            closeButton = document.createElement("button") 
            folderShow.appendChild(closeButton)
            closeButton.textContent = "关闭文件夹"
            closeButton.style.width = "100px"
            closeButton.style.position = "absolute"
            closeButton.style.top = "0px"
            closeButton.style.left= parseInt(folderShow.style.width)-parseInt(closeButton.style.width) +"px"
            closeButton.onclick = (e)=>{
                for (let child of document.querySelectorAll("#folderShow")){
                    child.remove()
                } 
            }

            //面包屑层级栏
            breadcrumb = document.createElement("div")
            breadcrumb.id = "breadcrumb"
            folderShow.appendChild(breadcrumb)
            breadcrumb.style.width = "100%"
            breadcrumb.style.height = "5%"
            breadcrumb.style.margin = "4px"
            breadcrumb.style.backgroundColor = "yellow"
            breadcrumb.style.display = "flex"
            breadcrumb.style.alignItems = "center"

            let breadCrumbPage = document.createElement("div")
            breadCrumbPage.style.width = "10%"
            breadCrumbPage.style.height = "80%"
            breadCrumbPage.style.backgroundColor = "green"
            breadCrumbPage.textContent = this.iconName
            breadCrumbPage.id = "breadCrumb" + this.iconName
            breadCrumbPage.addEventListener("click",(e)=>{
                debugger
                this.showFolder()
            })
            breadcrumb.appendChild(breadCrumbPage)

            //可移动区域
            let folderContainer =  document.createElement("div")
            folderContainer.style.maxWidth = "90%"
            folderContainer.style.width = 7 * this.moveDistanceX +"px"
            folderContainer.style.maxHeight = "90%"
            folderContainer.style.height = 5 * this.moveDistanceY + "px"
            folderContainer.style.backgroundColor = "red"
            folderContainer.style.position = "relative"
            folderShow.appendChild(folderContainer)

            this.folderContainer = folderContainer
            this.divContainer.container.appendChild(folderShow) //主页面添加展示文件夹框
            this.folderContainerObj = new DivContainer(this.folderContainer,150)

            this.showChildrenDivMoverList(this.folderContainerObj)
        }else{
            //内层文件夹逻辑
            let breadCrumb =document.querySelector("#breadcrumb") //查询面包屑栏
            let currentParentFolderMover = this
            breadCrumb.replaceChildren() //清空面包屑栏
            while( currentParentFolderMover!==null){
                let breadCrumbPage = document.createElement("div")
                breadCrumbPage.style.width = "10%"
                breadCrumbPage.style.height = "80%"
                breadCrumbPage.style.backgroundColor = "green"
                breadCrumbPage.textContent = currentParentFolderMover.iconName
                breadCrumbPage.id = "breadCrumb" + currentParentFolderMover.iconName
                let currentParentFolderMoverCallBack = currentParentFolderMover
                breadCrumbPage.addEventListener("click",(e)=>{
                    currentParentFolderMoverCallBack.showFolder()
                })
                breadCrumb.insertBefore(breadCrumbPage,breadCrumb.firstChild)
                currentParentFolderMover = currentParentFolderMover.parentFolderMover
            }

            let orginalFolderMover =  this.findRootFolderMoverObj(this); //找到根文件夹的对象
            orginalFolderMover.folderContainerObj.clearAllAreaAndElement()   
            this.showChildrenDivMoverList(orginalFolderMover.folderContainerObj)
        }
    }
    
    findRootFolderMoverObj(currentFolderMoverObj){
        let orginalFolderMover  = currentFolderMoverObj
        while(orginalFolderMover.parentFolderMover !== null){
            orginalFolderMover = orginalFolderMover.parentFolderMover
        }
        return orginalFolderMover
    }

    cleanFolderShow(){
        let folderShow = document.querySelector("#folderShow")
        if(folderShow){
            folderShow.remove()
        }
    }



    showChildrenDivMoverList(folderContainerObj){
        //显示文件夹元素
        let i = 0
        let j = 0
        for(let child of this.childrenDivMoverList){
            if(j >= folderContainerObj.columnNum){
                j = 0
                i++
            }
            if(i >= folderContainerObj.rowNum){
                folderContainerObj.extendArea(this.moveDistanceY)
                i++
            }
            if(child instanceof FolderMover){
                folderContainerObj.appendFolderDiv({
                    iconName:child.iconName,
                    childrenDivMoverList:child.childrenDivMoverList,
                    X:j,Y:i,
                    parentFolderMover:child.parentFolderMover,
                    folderContainerObj})
            }else if(child instanceof DivMover){
                folderContainerObj.appendDiv(undefined,j,i,child.icon,child.iconName,child.url)
            }
            j++
        }        
    }
}    